﻿@using GoodMan.Infrastructure.Entities.Entity;
@{
    Layout = "~/Views/Shared/_Main.cshtml";
}
@section head{
    <link rel="Stylesheet" type="text/css" href="/Content/css/bootstrap-datetimepicker.min.css" />
}
<div class="title-line title-line-red text-left">
    <h4>
        用户注册</h4>
</div>
<div class="row">
    <div class="span7">
        <!--表单-->
        <span class="muted">&nbsp;&nbsp;请认真填写一下信息</span>
        <br />
        <br />
        <form id="regform" action="/account/register" method="post" class="form-horizontal">
        <input type="hidden" name="token" />
        @if (ViewBag.Error != null)
        { 
            <label class="alert alert-error">@ViewBag.Error</label>
        }
        <div class="control-group">
            <label class="control-label">
                账 户 (*)</label>
            <div class="controls">
                <input type="text" class="span4 {required:true,email:true,remote:{url:'/account/usernameonly'},messages:{remote:'用户名已存在'}}"
                    id="txtusername" name="UserName" placeholder="请输入您的常用邮箱作为您的登录帐号" />
                <span class="help-block" style="color: Gray">例：example@gmail.com</span>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                密 码 (*)</label>
            <div class="controls">
                <input type="password" class="span4 {required:true,strongpwd:true, minlength:6,maxlength:18}" id="txtpassword"
                    name="Password" placeholder="请输入帐号密码" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                确认密码 (*)</label>
            <div class="controls">
                <input type="password" class="span4 {required:true,equalTo:'#txtpassword'}" id="txtconfrim"
                    name="Confirm" placeholder="请输入帐号密码" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                昵 称 (*)</label>
            <div class="controls">
                <input type="text" class="span4 {required:true}" id="txtnickname" name="NickName"
                    placeholder="请输入您的昵称" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                真实姓名 (*)</label>
            <div class="controls">
                <input type="text" class="span4 {required:true,cn:true}" id="txtrealName" name="RealName"
                    placeholder="请输入您的真实姓名" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                性别</label>
            <div class="controls">
                <select name="Gender" id="sltGender">
                    <option value="1" selected="selected">男</option>
                    <option value="0">女</option>
                </select>
            </div>
        </div>
@*        <div class="control-group">
            <label class="control-label">
                生日 (*)</label>
            <div id="datetimepicker" class="input-append span3">
                <input id="txtBirthday" data-format="yyyy-MM-dd" type="text" name="Birthday" class="{required:true,dateISO:true}" />
                <span class="add-on"><i class="icon-calendar" data-time-icon="icon-time" data-date-icon="icon-calendar">
                </i></span>
            </div>
        </div>*@
 @*       <div class="control-group">
            <label class="control-label">
                QQ (*)</label>
            <div class="controls">
                <input type="text" class="span4 {required:true,number:true}" id="txtQQ" name="QQ" placeholder="请输入您的QQ号" />
            </div>
        </div>*@
        <div class="control-group">
            <label class="control-label">
                联系电话 (*)</label>
            <div class="controls">
                <input type="text" class="span4 {required:true,number:true,minlength:11,maxlength:11}" id="txtPhone" name="Phone" placeholder="请输入您的联系电话" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                所在楼栋</label>
            <div class="controls">
                <select name="FloorId" id="sltFloorId">
                    @{
                        List<Dormitory> dormitories = ViewBag.FloorList;
                        if (dormitories != null)
                        {
                            foreach (var item in dormitories)
                            {
                        <option value="@item.Id">@item.Name</option>
                            }
                        }
                    }
                </select>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                寝室号 (*)</label>
            <div class="controls">
                <input type="text" class="span4 {required:true}" id="txtDormitory" name="Dormitory"
                    placeholder="请输入您的寝室号" />
            </div>
        </div>
 @*       <div class="control-group">
            <label class="control-label">
                身份证号</label>
            <div class="controls">
                <input type="text" class="span4 {number:true}" id="txtIdCardNo" name="IdCardNo" placeholder="请输入您的身份证号" />
            </div>
        </div>*@
        <div class="control-group row-fluid">
            <label class="control-label">
                验证码</label>
            <div class="controls controls-short">
                <div class="span5">
                    <input type="text" id="iptCheckCode" placeholder="请输入验证码" name="validCode"
                        maxlength="4" class="span12 {required:true,minlength:4,maxlength:4,messages:{required:'*',minlength:'四位验证码',maxlength:'四位验证码'}}" />
                </div>
                <div id="codeimg" class="span3">
                </div>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <label class="checkbox">
                    <input type="checkbox" name="agree" class="{required:true}" id="ckb" />我已阅读并同意&nbsp;&nbsp;<a
                        href="#"><strong>用户服务协议</strong></a>
                </label>
                <br />
                <br />
                <button type="submit" class="btn btn-danger">
                    <i class="icon-ok icon-white"></i>&nbsp;立即注册
                </button>
                <br />
                <br />
                <div class="reg-link">
                    <span class="muted">已经注册了帐户</span> &nbsp;&nbsp;<a href="/account/login">立即登录</a>
                </div>
            </div>
        </div>
        </form>
        <!--#表单-->
    </div>
    <div class="span5">
        <div class="reg-right-box">
            <h4>
                注册用户享有哪些好处：</h4>
            <ol>
                <li>保存您的个人资料</li>
                <li>收藏您关注的商品</li>
                <li>订阅本店商品信息</li>
            </ol>
        </div>
    </div>
</div>
@section tail{
    <script type="text/javascript" src="/Scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.metadata.js"></script>
    <script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript">
        var validation = new plug.BindValidCode();
        $(function () {
            validation.BindValidator();
            $('#datetimepicker').datetimepicker({
                pickTime: false
            });
            $('#regform').validate({
                errorClass: "help-inline",
                errorElement: "span",
                highlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').addClass('error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').removeClass('error');
                }
            });
        });
        function Refalsh(sender) {
            validation.Refalsh(sender);
        }
    </script>
}
